<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            vue提供 Mustache语法  {{  }} 实现将 vue对象中数据变量动态写入页面的基本操作
            
            Vue框架而言 取值：{{ Vue对象数据仓库变量|JS表达式|JS内置对象 }}

            Vue框架而言 为保证页面的最终展示正确，所有的插值表达式都会直接调用 vue toString 方法

                var _toString = Object.prototype.toString;

                // js 中的纯文本对象 -> 通过String()强制类型转换后，输出结果为 [object,Object]
                //                     目的剔除无法被 JSON 进行数据转换的变量
                function isPlainObject (obj) {
                    return _toString.call(obj) === '[object Object]'
                }

                // val.toString === _toString 目的将重写过toString 方法的变量进行剔除

                function toString (val) {
                    return val == null
                        ? ''
                        : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
                        ? JSON.stringify(val, null, 2)
                        : String(val)
                }
        -->
        <h3>{{ msg }}</h3>
        <h3>{{ 1+1 }}</h3>
        <h3>{{ Math }}</h3>
        <h3>{{ info }}</h3>
        <h2>插值表达式对各类型数据输出的结果展示</h2>
        <h3>null:{{ arg1 }}-输出空字符串</h3>
        <h3>undefined:{{ arg2 }}-输出空字符串</h3>
        <h3>Array:{{ arr }}</h3>
        <!-- <pre>{{ arr }}</pre> -->
        <h3>纯文本对象:{{ user }}</h3>
        <h3>DOM标签对象:{{ dom }}</h3>
        <h3>Set:{{ it }}</h3>
        <h3>构造器对象:{{ stu }}</h3>
        <h3>构造器对象(重写过toString):{{ stu1 }}</h3>
        <h3>boolean:{{ flag }}</h3>
        <h3>num:{{ num }}</h3>
        <h3>day:{{ day }}</h3>
    </div>
</body>
<script>
    function Stu(name,age){
        this.name = name;
        this.age = age
    }
    function StuA(name,age){
        this.name = name;
        this.age = age
    }
    StuA.prototype.toString = function(){
        return `我的名字叫${this.name},年龄为${this.age}`;
    }

    // Date.prototype.toString = function(){
    //     return this.getFullYear()+"年";
    // }

    new Vue({
        el:"#app",
        // vue的数据仓库
        data:{
            msg:"变量MSG",
            info:"变量info",
            arg1:null,
            arg2:undefined,
            arr:[1,2,3,4,5],
            user:{
                name:"tom",
                age:23
            },
            dom:new Option("option标签"),
            it:new Set([1,2,3,4,5]),
            stu:new Stu("jack",23),
            stu1:new StuA("jack",23),
            flag:false,
            num:1234,
            day:new Date()
        }
        
    })
</script>
</html>